<template>
  <v-card flat>
    <v-spacer class="px-7 pt-2 pb-4">
      <v-col>
        <v-row no-gutters>
          <v-col :cols="3" class="text-left"> Phases </v-col>
          <v-col class="text-left" :cols="8" :offset="1">
            <v-text-field
              v-model="phases.phases"
              v-validate="'required'"
              name="Phases"
              solo
              dense
              hide-details
              class="white-input"
            ></v-text-field>
            <span class="vee-validate-error">
              {{ errors.first("Phases") }}
            </span>
          </v-col>
        </v-row>
      </v-col>
      <v-col>
        <v-row no-gutters class="align-start">
          <v-col :cols="3" class="text-left"> Description </v-col>
          <v-col class="text-left" :cols="8" :offset="1">
            <v-textarea
              v-model="phases.description"
              v-validate="'required'"
              name="Description"
              height="144"
              no-resize
              solo
              hide-details
              class="white-input"
            ></v-textarea>
            <span class="vee-validate-error">
              {{ errors.first("Description") }}
            </span>
          </v-col>
        </v-row>
      </v-col>
      <v-col>
        <v-row no-gutters>
          <v-col :cols="3" class="text-left"> Percentage </v-col>
          <v-col class="text-left" :cols="8" :offset="1">
            <v-text-field
              v-model="phases.percentage"
              v-validate="'required|percentage'"
              name="Percentage"
              solo
              dense
              hide-details
              class="white-input"
            ></v-text-field>
            <span class="vee-validate-error">
              {{ errors.first("Percentage") }}
            </span>
          </v-col>
        </v-row>
      </v-col>
    </v-spacer>
  </v-card>
</template>
<script lang="ts">
import { Vue, Component, Watch } from "vue-property-decorator";
@Component({
  props: {
    backfill: Object,
  },
})
export default class AddEditPhases extends Vue {
  phases = {
    id: "",
    phases: "",
    description: "",
    percentage: "",
  };

  init() {
    const initPhases = {
      id: "",
      phases: "",
      description: "",
      percentage: "",
    };
    this.$set(this, "phases", initPhases);
  }

  get propBackfill() {
    return this.$props.backfill;
  }

  @Watch("propBackfill", { immediate: true })
  onPropBackfillChange(value: object | null) {
    if (value) {
      Object.assign(this.phases, this.propBackfill);
    } else {
      this.init();
    }
  }

  async saveFormData() {
    const validate = await this.$validator.validate();
    if (validate) {
      return this.getFormData();
    } else {
      return false;
    }
  }

  getFormData() {
    return this.phases;
  }
}
</script>
<style lang="scss" scoped></style>
